<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Mobile Devices Support @begin -->
  <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no" name="viewport" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no, email=no">
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="browsermode" content="application" />
  <meta name="x5-page-mode" content="default|app" />
  <meta name="screen-orientation" content="portrait" />
  <meta name="x5-orientation" content="portrait" />
  <!-- Mobile Devices Support @end -->
</head>

<body>
  <div id="box" style="font-size: 18px"></div>
  <script>
  var s = "网页可见区域宽 ：" + document.body.clientWidth;
  s += "<br/>网页可见区域高：" + document.body.clientHeight;
  s += "<br/>网页可见区域高：" + document.body.offsetHeight + " (包括边线的宽)";
  s += "<br/>网页正文全文宽：" + document.body.scrollWidth;
  s += "<br/>网页正文全文高：" + document.body.scrollHeight;
  s += "<br/>网页被卷去的高：" + document.body.scrollTop;
  s += "<br/>网页被卷去的左：" + document.body.scrollLeft;
  s += "<br/>网页正文部分上：" + window.screenTop;
  s += "<br/>网页正文部分左：" + window.screenLeft;
  s += "<br/>屏幕分辨率的高：" + window.screen.height;
  s += "<br/>屏幕分辨率的宽：" + window.screen.width;
  s += "<br/>屏幕可用工作区高度：" + window.screen.availHeight;
  s += "<br/>屏幕可用工作区宽度：" + window.screen.availWidth;
  s += "<br/>手机宽：" + document.documentElement.clientWidth;;
  s += "<br/>手机高：" + document.documentElement.clientHeight;
  var box = document.getElementById('box');
  box.innerHTML = s;
  </script>
</body>

</html>